feat(clerk-js,localizations,shared,ui): Add support for credits#7776
feat(clerk-js,localizations,shared,ui): Add support for credits#7776
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: f258cdb The changes in this PR will be included in the next version bump. This PR includes changesets to release 20 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
dstaley
changed the title
📝 WalkthroughWalkthroughAdds account credit support across the codebase: a changeset updating multiple Clerk packages; new JSON and TypeScript types for proration, payer credit, and consolidated credits; adds 🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. No actionable comments were generated in the recent review. 🎉 Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)
38-96:⚠️ Potential issue | 🟠 MajorFix proration credit rendering to avoid “undefined” output and preserve legacy credits.
The condition is driven by
totals.credits.proration, but the rendered amount comes fromtotals.credit. If the new credits object exists whiletotals.creditis null, the UI shows “- undefined”. If only the legacycreditexists, the proration credit disappears. Use a single proration amount source (credits fallback to legacy) for both the condition and display.Suggested fix
- const showProratedCredit = !!totals.credits?.proration?.amount && totals.credits.proration.amount.amount > 0; + const prorationAmount = totals.credits?.proration?.amount ?? totals.credit; + const showProratedCredit = !!prorationAmount?.amount && prorationAmount.amount > 0; ... - <LineItems.Description text={`- ${totals.credit?.currencySymbol}${totals.credit?.amountFormatted}`} /> + <LineItems.Description + text={`- ${prorationAmount?.currencySymbol}${prorationAmount?.amountFormatted}`} + />
🤖 Fix all issues with AI agents
In @.changeset/shy-loops-type.md:
- Around line 1-8: Add unit and integration tests covering the new
account-credit checkout flow: write unit tests for the parsing function (e.g.,
parseAccountCredits) to confirm it parses valid/invalid payloads and edge cases,
and add React Testing Library integration tests for the Checkout/Cart component
(e.g., Checkout, AccountCreditsBadge or AccountCreditsDisplay) to assert the UI
shows the credit amount, that totals are recalculated when credits apply, and
that error/zero-credit states render correctly; mock the API/props that supply
credits and include test cases for applying credits, removing credits, and
display formatting to prevent regressions.
| --- | ||
| '@clerk/localizations': minor | ||
| '@clerk/clerk-js': minor | ||
| '@clerk/shared': minor | ||
| '@clerk/ui': minor | ||
| --- | ||
|
|
||
| Add support for account credits in checkout. |
There was a problem hiding this comment.
Add tests covering account-credit checkout behavior.
No tests were added/updated for the new credits flow (parsing + UI display). Please add coverage to prevent regressions.
As per coding guidelines: "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."
🤖 Prompt for AI Agents
In @.changeset/shy-loops-type.md around lines 1 - 8, Add unit and integration
tests covering the new account-credit checkout flow: write unit tests for the
parsing function (e.g., parseAccountCredits) to confirm it parses valid/invalid
payloads and edge cases, and add React Testing Library integration tests for the
Checkout/Cart component (e.g., Checkout, AccountCreditsBadge or
AccountCreditsDisplay) to assert the UI shows the credit amount, that totals are
recalculated when credits apply, and that error/zero-credit states render
correctly; mock the API/props that supply credits and include test cases for
applying credits, removing credits, and display formatting to prevent
regressions.
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)
29-32:⚠️ Potential issue | 🟠 MajorAdd tests for the new credit rendering paths.
This PR introduces new credit logic (proration vs payer credits) but no tests were added/updated to cover it. Please add tests before merge.
As per coding guidelines, "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."
🤖 Fix all issues with AI agents
In `@packages/ui/src/components/Checkout/CheckoutForm.tsx`:
- Around line 84-88: The UI is rendering the prorated credit using the old field
totals.credit; update the rendering to read from the new credits structure used
by showProratedCredit (totals.credits.proration) so the displayed currency
symbol and formatted amount come from totals.credits.proration (e.g., replace
references to totals.credit in the LineItems.Description inside CheckoutForm.tsx
with the corresponding totals.credits.proration.currencySymbol and
totals.credits.proration.amountFormatted or their exact field names).
2 participants
Description
This PR adds support for the new account credit feature in checkout. If the current user or organization has a credit balance, the consumed amount is displayed in the same way that we display proration credits during checkout.
Testing Instructions
pnpm dev:sandboxto start the sandbox and go to itscenario.setScenario(AVAILABLE_SCENARIOS.CheckoutAccountCredit)Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Localization